<template>
    <div style="margin:20px;padding:20px;background-color:#fff;">
        <remote-js :js-url="'https://cdn.yiyiyiyi.info/store/prov/cityVue.data.js'" :js-load-call-back="getDataed"></remote-js>
        <h3>公司基本信息修改</h3>
        <el-form :model="form" ref="form" :rules="rules" label-width="80px" size="small" label-position="left">
        <el-form-item label="公司名称" prop="company">
            <el-input v-model="form.company" style="width:200px;" placeholder="请输入管理员姓名"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="username">
            <el-input v-model="form.username" style="width:200px;" placeholder="请输入管理员姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
            <el-input v-model.number="form.phone" maxlength="11" style="width:200px;" placeholder="请填写手机号"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
            <el-cascader
                :options="addressDate"
                v-model="form.address"
                @change="handleChange">
            </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="addressInfo">
            <el-input v-model="form.addressInfo" style="width:200px;" placeholder="请填写详细地址"></el-input>
        </el-form-item>
        <el-form-item label="认证图片">
            <el-upload
            action="https://imgupload.yiyiyiyi.info/upload/storeUploadImg"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            accept=".jpg,.png,.jpeg"
            :limit="2"
            :file-list="form.pictures"
            :on-success="handleSuccess"
            :on-exceed="handleExceed"
            :on-remove="handleRemove" size="small">
            <i class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="公司规模">
            <el-radio-group v-model="form.scale">
                <el-radio :label="1">50人以下</el-radio>
                <el-radio :label="2">50~100人</el-radio>
                <el-radio :label="3">100人以上</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="所在行业">
            <el-input v-model="form.industry" style="width:200px;" placeholder="请填写所在行业"></el-input>
        </el-form-item>
        <el-form-item label="联系邮箱">
            <el-input v-model="form.email" style="width:200px;" placeholder="请填写联系邮箱"></el-input>
        </el-form-item>
        <el-form-item label="固定电话">
            <el-input v-model="form.tel" style="width:200px;" placeholder="请填写固定电话"></el-input>
        </el-form-item>
        <el-form-item label="注册资金">
            <el-input v-model="form.cash" style="width:200px;" placeholder="请填写注册资金"></el-input>
        </el-form-item>
        <el-form-item label="备注">
            <el-input v-model="form.remark" style="width:200px;" placeholder="请填写备注"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
        </el-form-item>
        </el-form>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
    import remoteJs from '@/components/admin/component/remote.vue'
    export default {
        data() {
            return {
                form: {
                    username: '',
                    phone: '',
                    department: '',
                    company: '',
                    address:[],
                    addressInfo:'',
                    scale:'',
                    industry:'',
                    email:'',
                    cash:'',
                    remark:'',
                    pictures:[],
                    dialogVisible:false,
                    dialogImageUrl:'',
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户姓名', trigger: 'blur' },
                        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                    ],
                    company: [
                        { required: true, message: '请输入公司名称', trigger: 'blur' },
                    ],
                    phone:[
                        { required: true, message: '请输入手机号', trigger: 'blur'},
                        { type:'number',min: 10000000000, max: 19999999999, message: '请输入正确的手机号', trigger: 'blur'}
                    ],
                    address:[
                        { required: true, message: '请选择地址', trigger: 'change'},
                    ],
                    addressInfo:[
                        { required: true, message: '请填写详细地址', trigger: 'blur'},
                    ]
                },
                addressDate:[],
                isIndeterminate: false,
                checkAll:false,
                dialogImageUrl: '',
                dialogVisible: false
            }
        },
        components:{
            remoteJs
        },
        created(){
            this.$axios({
                url: this.$url.company+'/'+this.$route.query.id,
                method:'get',
            }).then(response=>{
                if(response.data.result.success){
                    let data = response.data.content
                    this.form.company = data.name
                    this.form.username = data.username
                    this.form.phone = data.phone
                    this.form.address = [data.province,data.city,data.area_bh]
                    this.form.addressInfo = data.address
                    if(data.pictures != null){
                        // this.form.pictures = data.pictures.split(',')
                        let p_arr = data.pictures.split(',')
                        for(var i = 0;i < p_arr.length;i++){
                            this.form.pictures.push({name:p_arr[i],url:p_arr[i]})
                        }
                    }
                    this.form.scale = data.scale
                    this.form.industry = data.business
                    this.form.tel = data.telphone
                    this.form.cash = data.cash
                    this.form.remark = data.remark
                    this.form.email = data.email
                }else{
                    this.$notify.error({
                        title: '错误',
                        message: response.data.result.errorMsg
                    });
                }
            }).catch(error=>{
                console.log(error);
            })
        },
        mounted(){
            
        },
        methods: {
            onSubmit(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        let pictures_arr = []
                        for(let value of this.form.pictures){
                            pictures_arr.push(value.url)
                        }
                        pictures_arr = pictures_arr.join(',')
                        this.$axios({
                            url: this.$url.company+'/'+this.$route.query.id,
                            method:'patch',
                            data:{
                                name:this.form.company,
                                username:this.form.username,
                                phone:this.form.phone,
                                area_bh:this.form.address[2],
                                address:this.form.addressInfo,
                                cash:this.form.cash,
                                remark:this.form.remark,
                                pictures:pictures_arr,
                                scale:this.form.scale,
                                telphone:this.form.tel,
                                business:this.form.industry,
                                email:this.form.email
                            },
                        }).then(response=>{
                            if(response.data.result.success){
                                this.$notify({
                                    title: '成功',
                                    message: '修改成功',
                                    type: 'success'
                                });
                            }else{
                                this.$notify.error({
                                    title: '错误',
                                    message: response.data.result.errorMsg
                                });
                            }
                        }).catch(error=>{
                            console.log(error);
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
                this.form.pictures = fileList
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleCheckAllChange(){

            },
            handleChange(){

            },
            handleSuccess(response, file, fileList){
                console.log(response, file, fileList)
                this.form.pictures.push({name:'https://cdn.yiyiyiyi.info/'+response.content,url:'https://cdn.yiyiyiyi.info/'+response.content})
            },
            getDataed(){
                this.addressDate= cityData
            },
            handleExceed(){
                this.$message.warning(`最多只能上传两个文件哦`);
            },
        },
    }
</script>

<style scoped>

</style>